import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Form, Button, Input, message } from 'antd';
import cookie from 'cookiejs';
import { login, register } from "../../api/api";
import axios from 'axios'
import './login.scss';
// import store from '../../store';

// @inject((store) => {
//   console.log(store);
//   return {
//     user: store.user,
//   };
// })
@inject('user')


@observer
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      account: '',
      password: ''
    };
  }
  click = () => {
    this.props.history.push('/');
  }
  // handleSubmit = (e) => {
  //   e.preventDefault();
  //   this.props.form.validateFieldsAndScroll((err, values) => {
  //     if (!err) {
  //       console.log('Received values of form: ', values);
  //     }
  //   });
  // }
  login = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        login(values).then(res => {
          if (res.code) {
            message.success(res.msg)
            cookie('zp_token', res.token)
            localStorage.setItem('account', values.account)
            this.props.user.getUserInfo(values.account)
            this.props.history.push('/');
          } else {
            message.error(res.msg)
          }
        })
        console.log('Received values of form: ', values);
      }
    });
  }
  register = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        register(values).then(res => {
          if (res.code) {
            message.success(res.msg)
            cookie('zp_token', res.token)
            localStorage.setItem('account', values.account)
            this.props.user.getUserInfo(values.account)
            this.props.history.push('/');
          } else {
            message.error(res.msg)
          }
        })
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <div className="login-wrap">
      {/* <Form onSubmit={this.handleSubmit}> */}
      <Form>
      <Form.Item
          {...formItemLayout}
          label="用户名"
        >
          {getFieldDecorator('account', {
            validateTrigger: 'onBlur',
            rules: [{
              min: 3, max: 8, message: 'length between 3 and 8'
            }, {
              required: true, message: 'Please input your account',
            }],
          })(
            <Input />
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="密码"
        >
          {getFieldDecorator('password', {
            validateTrigger: 'onBlur',
            rules: [{
              required: true, message: 'Please input your password!',
            }, {
              // validator: this.validateToNextPassword,
              min: 3, max: 8, message: 'length between 3 and 8'
            }],
          })(
            <Input type="password"/>
          )}
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          {/* <Button type="primary" htmlType="submit">登录</Button> */}
          <Button type="primary" onClick={this.login}>登录</Button>
          <Button type="primary" htmlType="submit" onClick={this.register}>注册</Button>
        </Form.Item>
      </Form>
        {/* <div className="login-box">
          <div className="input-wrap">
            <Input placeholder="请输入用户名" />
          </div>
          <div className="input-wrap">
            <Input placeholder="请输入密码" />
          </div>
          <div className="button-wrap">
            <Button onClick={this.click}>login</Button>
          </div>
        </div> */}
      </div>
    );
  }
}
export default Form.create()(Login)